<template>

  <div class="student">
    <!-- 页面主体布局容器 -->
    <div class="page-middle">
      <!-- 左侧信息面板 -->
      <div class="page-middle-left">
        <!-- 板块一：老师基本信息 -->
        <div class="page-middle-left-one">
          <div class="flex align-center">
            <div class="title">基本信息</div>
            <!-- 教师选择下拉框已移除，现在通过接口获取默认教师数据 -->
          </div>
          <!-- 基本信息内容容器 - 使用多边形裁剪效果 -->
          <div class="context">
            <!-- 左侧：头像和姓名区域 -->
            <div class="stu-base-left">
              <!-- src="@/assets/images/profile/teacher/teacher_nv.png" -->
              <img class="stu-base-toux" @click="showTeacherInfoList" :src="teacherAvatarSrc"  alt="" />
              <div style="font-size: 16px" v-px-to-vw>
                {{ loading ? "加载中..." : teacherInfo.name }}
                <img :src="getGenderIcon(teacherInfo.gender)" :alt="teacherInfo.gender === '男' ? '男' : '女'" style="width: 16px; height: 16px" v-px-to-vw />
              </div>
            </div>
            <!-- 右侧：详细信息网格布局 -->
            <div class="stu-base-right">
              <div class="stu-info-base">学科:&nbsp;&nbsp;{{ teacherInfo.xrjxkmc }}</div>
              <div class="stu-info-base">工号:&nbsp;&nbsp;{{ teacherInfo.gh }}</div>
              <div class="stu-info-base">出生日期:&nbsp;&nbsp;{{ teacherInfo.csrq }}</div>
              <div class="stu-info-base">学历:&nbsp;&nbsp;{{ teacherInfo.xlmc }}</div>
              <div class="stu-info-base">职称:&nbsp;&nbsp;{{ teacherInfo.zcmc }}</div>
              <div class="stu-info-base">职务:&nbsp;&nbsp;{{ teacherInfo.zw }}</div>
            </div>
          </div>
        </div>
        <!-- 板块二：课程与考勤信息 -->
        <div class="page-middle-left-two">
          <div class="title">考勤信息</div>
          <div class="context" style="padding: 0 15px; box-sizing: border-box" v-px-to-vw>
            <div class="kechengKaoQ">
              <div class="c-title">考勤统计</div>
              <div class="flex align-center" style="margin-top: 10px" v-px-to-vw>
                <!-- 学期下拉框 -->
                <select v-model="selectedTerm" class="custom-select">
                  <option v-for="term in termOptions" :key="term.value" :value="term.value">
                    {{ term.label }}
                  </option>
                </select>
                <!-- 出勤状态下拉框 -->
                <select style="margin-left: 10px" v-px-to-vw v-model="selectedAttendanceStatus" class="custom-select">
                  <option v-for="status in attendanceStatusOptions" :key="status.value" :value="status.value">
                    {{ status.label }}
                  </option>
                </select>
              </div>
              <div ref="attendanceChartRef" style="height: 100px; flex: 1; flex-grow: 1" v-px-to-vw></div>
              <div class="kechengKaoQ-context">
                <!-- 考勤数据展示容器 -->
                <div class="kechengKaoQ-context-wk">
                  <!-- 出勤天数 -->
                  <div style="flex: 1">
                    <div class="bj chuqin-bj">
                      <span class="bj-text chuqin-text">2天</span>
                    </div>
                    <div class="bj-desc" style="color: #ffffff; font-size: 12px" v-px-to-vw>出勤天数</div>
                  </div>
                  <!-- 请假天数 -->
                  <div style="flex: 1">
                    <div class="bj qingjia-bj">
                      <span class="bj-text qingjia-text">2天</span>
                    </div>
                    <div class="bj-desc" style="color: #ffffff; font-size: 12px" v-px-to-vw>请假天数</div>
                  </div>
                  <!-- 早退天数 -->
                  <div style="flex: 1">
                    <div class="bj zaotui-bj">
                      <span class="bj-text zaotui-text">0天</span>
                    </div>
                    <div class="bj-desc" style="color: #ffffff; font-size: 12px" v-px-to-vw>早退天数</div>
                  </div>
                  <!-- 迟到天数 -->
                  <div style="flex: 1">
                    <div class="bj chidao-bj">
                      <span class="bj-text chidao-text">1天</span>
                    </div>
                    <div class="bj-desc" style="color: #ffffff; font-size: 12px" v-px-to-vw>迟到天数</div>
                  </div>
                  <!-- 缺勤天数 -->
                  <div style="flex: 1">
                    <div class="bj queqing-bj">
                      <span class="bj-text queqing-text">1天</span>
                    </div>
                    <div class="bj-desc" style="color: #ffffff; font-size: 12px" v-px-to-vw>缺勤天数</div>
                  </div>
                </div>
              </div>
              <div class="flex align-center" style="font-size: 9px; color: rgba(0, 203, 255, 0.8); margin-top: 10px" v-px-to-vw>
                <img src="@/assets/images/profile/teacher/warning.png" style="width: 12px; height: 11px; margin-right: 4px" v-px-to-vw />
                该老师存在长期请假问题，请负责主任进行核实处理！
              </div>
            </div>
          </div>
        </div>
        <!-- 板块三：荣誉特长信息 -->
        <div class="page-middle-left-three" style="height: 36%">
          <div class="title">职业发展</div>
          <div class="context" style="padding: 0 15px; box-sizing: border-box" v-px-to-vw>
            <div class="kechengKaoQ" style="padding-bottom: 0">
              <div class="c-title">职称晋升</div>
              <div style="height: calc(100% - 28px); width: 99%; overflow-x: scroll" v-px-to-vw>
                <snake-timeline :steps="steps"></snake-timeline>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间区域：教师照片展示 -->
      <div class="page-middle-center">
        <div class="tab-menus-wk">
          <!-- 教师照片展示区域 -->
          <div class="student-photo-container">
            <!-- 预加载所有照片资源 -->
            <img v-show="false" src="@/assets/images/profile/teacher/teacher_nv.png" alt="预加载女教师照片" />
            <img v-show="false" src="@/assets/images/profile/teacher/teacher_nan.png" alt="预加载男教师照片" />
            
            <!-- 显示对应性别的照片，立即显示 -->
            <img 
              v-if="teacherInfo.gender === '女'" 
              class="student-photo" 
              src="@/assets/images/profile/teacher/teacher_nv.png" 
              alt="女教师照片"
              @load="onPhotoLoad"
              @error="onPhotoError"
            />
            <img 
              v-else-if="teacherInfo.gender === '男'" 
              class="student-photo" 
              src="@/assets/images/profile/teacher/teacher_nan.png" 
              alt="男教师照片"
              @load="onPhotoLoad"
              @error="onPhotoError"
            />
            
            <!-- 默认照片，确保始终有内容显示 -->
            <img 
              v-else
              class="student-photo" 
              src="@/assets/images/profile/teacher/teacher_nv.png" 
              alt="默认教师照片"
            />
            
            <div class="student-photo-name stu-name-mid">
              {{ teacherInfo.name || "" }}
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧区域：详细信息标签页 -->
      <div class="page-middle-right">
        <!-- 右侧内容容器 - 使用rightinfo3x.png作为背景边框 -->
        <div class="right-content-container">
          <!-- 标签页菜单容器 -->
          <div class="tab-menus-wk">
            <ul class="tab-menus">
              <li class="menu-box" :class="{ active: currentTab === 'score' }">
                <router-link @click.native="currentTab = 'score'" :to="{ path: 'score', query: { personCode: personCode } }">教学情况</router-link>
              </li>
              <li class="menu-box" :class="{ active: currentTab === 'teach' }">
                <router-link @click.native="currentTab = 'teach'" :to="{ path: 'teach', query: { personCode: personCode } }">教学质量</router-link>
              </li>
              <!-- <li class="menu-box" :class="{ active: currentTab === 'result' }">
                <router-link @click.native="currentTab = 'result'" :to="{ path: '/result', query: { personCode: personCode } }">教学成果</router-link>
              </li> -->
            </ul>
          </div>
          <!-- 路由视图容器 -->
          <div style="width: 100%; height: calc(100% - 70px)" v-px-to-vw>
            <router-view />
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 教师列表弹窗组件 -->
  <csDialoga v-model="teacherInfoListDialogVisible" width="60%">
    <div class="dialog-content-stu">
      <div class="flex" style="justify-content: space-between;">
        <div class="flex">
          <div class="flex align-center">
            学段
            <el-select v-model="teacherXd" style="width: 120px; margin: 0 10px;" size="small" placeholder="选择学段">
              <el-option label="初中" value="初中" />
              <el-option label="高中" value="高中" />
            </el-select>
          </div>
          <div class="flex align-center">
            教师工号
            <el-input v-model="teacherGh" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索教师工号"
              :suffix-icon="Search" />
          </div>
          <div class="flex align-center">
            任教学科
            <el-input v-model="teacherSubject" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索任教学科"
              :suffix-icon="Search" />
          </div>
          <div class="flex align-center">
            教师姓名
            <el-input v-model="teacherName" style="width: 160px; margin: 0 10px;" size="small" placeholder="搜索教师姓名"
              :suffix-icon="Search" />
          </div>
          <div class="flex align-center">
            <el-button type="primary" size="small" @click="getTeacherList">搜索</el-button>
          </div>
        </div>
      </div>
      <el-table :height="380" highlight-current-row @current-change="handleTeacherListCurrentChange"
        :data="paginatedTeacherTableData" style="width: 100%; margin-top: 20px; cursor: pointer;">
        <el-table-column align="center" prop="jsxm" label="教师姓名" />
        <el-table-column align="center" prop="gh" label="教师工号" />
        <el-table-column align="center" prop="xrjxkmc" label="任教学科" />
      </el-table>
    </div>
    <el-pagination style="justify-content: flex-end; margin: 10px 0;" size="small"
      layout="total, sizes, prev, pager, next, jumper" :total="filteredTeacherTableData.length"
      :page-sizes="[10, 20, 30, 50]" v-model:current-page="teacherCurrentPage" v-model:page-size="teacherPageSize"
      @current-change="handleTeacherCurrentChange" @size-change="handleTeacherSizeChange">
    </el-pagination>
  </csDialoga>
</template>
<script setup>
import { ref, onMounted,computed , nextTick } from "vue";
import { useRouter } from "vue-router";
import snakeTimeline from "./components/snakeTimeline.vue";
import * as echarts from "echarts";
import { getTeacherBaseInfo,get_teacher_pic, getSwitchFilter, defaultTeacher } from "@/api/teacher.js";
import { Search } from '@element-plus/icons-vue'

const router = useRouter();
const currentTab = ref("score");
const steps = ref([
  { date: "2028.09", content: "二级教师" },
  { date: "2028.10", content: "三级教师" },
  { date: "2028.11", content: "高级教师" },
  { date: "2028.11", content: "高级教师" },
  { date: "2028.11", content: "高级教师" },
  { date: "2028.11", content: "高级教师" },
  { date: "2028.11", content: "高级教师" },
  { date: "2028.4", content: "高级教师" },
  { date: "2028.4", content: "高级教师" },
]);

// 教师信息数据
const teacherInfo = ref({});

// 加载状态
const loading = ref(false);

// 照片加载状态管理
const photoLoading = ref(false);
const photoLoaded = ref(false);

// personCode输入值 - 从接口获取默认值
const personCode = ref("");
//-------------------------------------------------------------------------

// 教师筛选弹窗相关变量
const teacherInfoListDialogVisible = ref(false);
const teacherGh = ref('');
const teacherSubject = ref('');
const teacherName = ref('');
const teacherXd = ref('初中'); // 默认选择初中
const teacherTableData = ref([]);
const teacherCurrentPage = ref(1);
const teacherPageSize = ref(10);

// 获取教师基本信息
const getTeacherInfo = async () => {
  if (!personCode.value) {
    console.warn('教师工号为空，无法获取教师信息');
    return;
  }
  
  try {
    loading.value = true;
    
    // 并行获取基本信息和头像，但优先处理基本信息
    const baseInfoPromise = getTeacherBaseInfo(personCode.value);
    const avatarPromise = getTeacherAvatar(personCode.value);
    
    // 等待基本信息完成，立即显示
    const baseInfoResponse = await baseInfoPromise;
    if (baseInfoResponse.code === 0 && baseInfoResponse.data && baseInfoResponse.data.length > 0) {
      const data = baseInfoResponse.data[0];
      teacherInfo.value = {
        name: data.jsxm,
        gender: data.xbmc,
        xrjxkmc: data.xrjxkmc,
        gh: data.gh,
        csrq: data.csrq,
        xlmc: data.xlmc,
        zcmc: data.zcmc,
        zw: data.zw
      };
    }
    
    // 基本信息获取完成后，立即结束loading状态
    loading.value = false;
    
    // 等待头像获取完成（如果还没完成的话）
    avatarPromise.catch(error => {
      console.warn('获取教师头像失败:', error);
    });
    
  } catch (error) {
    console.error('获取教师基本信息失败:', error);
    loading.value = false;
  }
};

// 教师头像 base64 数据
const teacherAvatarBase64 = ref('');

// 获取教师头像
const getTeacherAvatar = async (code) => {
  try {
    const response = await get_teacher_pic(code);
    // 检查返回的数据结构并正确设置头像数据
    if (response && response.data && response.data.length > 0 && response.data[0].pic) {
      teacherAvatarBase64.value = response.data[0].pic;
    } else {
      // 如果没有头像数据，清空该属性以确保使用默认头像
      teacherAvatarBase64.value = '';
    }
  } catch (error) {
    // 出错时清空头像数据，确保使用默认头像
    teacherAvatarBase64.value = '';
  }
}

// 获取教师头像的显示源
const teacherAvatarSrc = computed(() => {
  if (teacherAvatarBase64.value) {
    return `data:image/png;base64,${teacherAvatarBase64.value}`;
  }
  
  // 否则根据性别使用默认头像
  if (teacherInfo.value.gender === '男') {
    return new URL("@/assets/images/profile/teacher/teacher_tx_nan.png", import.meta.url).href;
  } else {
    return new URL("@/assets/images/profile/teacher/teacher_tx_nv.png", import.meta.url).href;
  }
});

// 获取性别图标的方法
const getGenderIcon = (gender) => {
  if (gender === "男") {
    return new URL("@/assets/images/profile/students/m.svg", import.meta.url).href;
  } else {
    return new URL("@/assets/images/profile/students/w.svg", import.meta.url).href;
  }
};

// 照片加载成功处理
const onPhotoLoad = () => {
  photoLoading.value = false;
  photoLoaded.value = true;
};

// 照片加载失败处理
const onPhotoError = () => {
  photoLoading.value = false;
  photoLoaded.value = false;
  console.warn('教师照片加载失败，使用默认照片');
};

const selectedTerm = ref(1);
const selectedAttendanceStatus = ref(1);
const termOptions = ref([{ value: 1, label: "高三上学期" }]);
const attendanceStatusOptions = ref([{ value: 1, label: "出勤" }]);

const attendanceChartRef = ref(null);
let attendanceChart = ref(null);
function initAttendanceChart() {
  // 添加检查确保元素存在
  if (attendanceChartRef.value) {
    attendanceChart.value = echarts.init(attendanceChartRef.value);
    attendanceChart.value.setOption({
      tooltip: {},
      legend: {
        show: false,
      },
      grid: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 30,
      },
      xAxis: {
        data: ["3月", "4月", "5月", "6月", "7月", "8月", "9月"],
        axisLine: {
          lineStyle: {
            color: "#0094FF",
          },
        },
        axisTick: {
          lineStyle: {
            color: "#0094FF",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#0094FF",
          },
        },
        axisLabel: {
          color: "#FFFFFF",
        },
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: "#0094FF",
          },
        },
        axisLabel: {
          color: "#00D1FF",
          fontSize: 10,
          fontWeight: "bold",
        },
        splitLine: {
          lineStyle: {
            color: "#0094FF",
          },
        },
      },
      series: [
        {
          name: "出勤情况",
          type: "line",
          lineStyle: {
            color: "#00d1ff",
          },
          symbol: "circle",
          symbolSize: 4,
          itemStyle: {
            color: "#75F9FD",
            borderWidth: 1,
            borderColor: "#00FF38",
          },
          data: [5, 20, 36, 10, 10, 20, 5],
        },
      ],
    });
  }
}

const onTeacherChange = async () => {
  // 立即重置照片状态，确保UI响应
  photoLoading.value = true;
  photoLoaded.value = false;
  
  // 立即更新教师基本信息（如果有缓存数据）
  if (teacherInfo.value && teacherInfo.value.gender) {
    // 立即显示对应性别的照片
    nextTick(() => {
      photoLoading.value = false;
    });
  }
  
  // 并行获取教师基本信息和头像，避免串行延迟
  await Promise.all([
    getTeacherInfo(),
    updateChildComponents()
  ]);
};

// 通知子组件更新数据
const updateChildComponents = () => {
  // 通过路由参数更新子组件
  const currentRoute = router.currentRoute.value;
  if (currentRoute.path.includes('score') || currentRoute.path.includes('teach')) {
    // 使用 replace 而不是 push，避免在历史记录中创建多余的条目
    router.replace({
      path: currentRoute.path,
      query: { 
        ...currentRoute.query,
        personCode: personCode.value 
      }
    });
  }
};

// 教师筛选弹窗相关方法
// 显示教师列表
const showTeacherInfoList = async () => {
  teacherInfoListDialogVisible.value = true;
}

// 教师切换-根据条件筛选教师
const getTeacherList = async () => {
  // 将查询条件组合成一个搜索文本
  const searchText = [teacherGh.value, teacherSubject.value, teacherName.value]
    .filter(text => text && text.trim())
    .join(' ');
  
  const res = await getSwitchFilter(searchText, teacherXd.value);
  teacherTableData.value = res.data;
  teacherCurrentPage.value = 1;
}

// 教师列表行点击处理
const handleTeacherListCurrentChange = (currentRow, oldCurrentRow) => {
  personCode.value = currentRow.gh;
  // 重新获取教师基本信息
  getTeacherInfo();
  // 通知子组件更新数据
  updateChildComponents();
  teacherInfoListDialogVisible.value = false;
}

// 教师列表分页相关计算属性
const filteredTeacherTableData = computed(() => {
  return teacherTableData.value;
});

const paginatedTeacherTableData = computed(() => {
  const start = (teacherCurrentPage.value - 1) * teacherPageSize.value;
  const end = start + teacherPageSize.value;
  return filteredTeacherTableData.value.slice(start, end);
});

// 教师列表分页方法
const handleTeacherCurrentChange = (page) => {
  teacherCurrentPage.value = page;
};

const handleTeacherSizeChange = (size) => {
  teacherPageSize.value = size;
  teacherCurrentPage.value = 1;
};

// 获取默认教师工号
const getDefaultTeacher = async () => {
  try {
    const response = await defaultTeacher();
    if (response.code === 0 && response.data && response.data.length > 0) {
      personCode.value = response.data[0].value;
      // 获取到默认教师工号后，立即获取教师信息
      await getTeacherInfo();
      // 设置默认路由
      setDefaultRoute();
    }
  } catch (error) {
    console.error('获取默认教师工号失败:', error);
    // 如果获取失败，使用备用值
    personCode.value = "A05001";
    await getTeacherInfo();
    // 设置默认路由
    setDefaultRoute();
  }
};

// 设置默认路由
const setDefaultRoute = () => {
  if (router.currentRoute.value.path === '/teacher') {
    router.push({
      path: '/teacher/score',
      query: { personCode: personCode.value }
    });
  }
  // 确保子组件能够获取到正确的数据
  nextTick(() => {
    updateChildComponents();
  });
  
  // 添加延迟刷新，确保子组件完全挂载后再刷新数据
  setTimeout(() => {
    updateChildComponents();
  }, 100);
};

onMounted(() => {
  // 使用 nextTick 确保 DOM 已经渲染完成
  nextTick(() => {
    initAttendanceChart();
  });
  
  // 预加载照片资源
  preloadTeacherPhotos();
  
  // 获取默认教师工号，然后获取教师信息
  getDefaultTeacher();
});

// 预加载教师照片资源
const preloadTeacherPhotos = () => {
  const photoUrls = [
    new URL("@/assets/images/profile/teacher/teacher_nv.png", import.meta.url).href,
    new URL("@/assets/images/profile/teacher/teacher_nan.png", import.meta.url).href
  ];
  
  photoUrls.forEach(url => {
    const img = new Image();
    img.src = url;
    img.onload = () => {
      console.log('教师照片预加载成功:', url);
    };
    img.onerror = () => {
      console.warn('教师照片预加载失败:', url);
    };
  });
};
</script>
<style scoped="student" lang="scss">
/* 学生信息页面主样式 */
.student {
display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  width: calc(100% - 40px);
  margin: 10px 20px;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: rgba(22, 40, 56, 0.5);
  
  // 科技感发光边框效果
  position: relative;
  border-radius: 8px;
  
  // // 创建伪元素实现发光边框
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: -2px;
  //   left: -2px;
  //   right: -2px;
  //   bottom: -2px;
  //   background: linear-gradient(45deg, #00a7ff, #00fff0, #00ffb2, #00a7ff);
  //   background-size: 400% 400%;
  //   border-radius: 8px;
  //   z-index: -1;
  //   animation: techGlowBorder 3s ease infinite;
  //   filter: blur(8px);
  //   opacity: 0.8;
  // }
  
  // // 添加内层边框
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   border: 1px solid rgba(0, 167, 255, 0.6);
  //   border-radius: 8px;
  //   box-shadow: 
  //     inset 0 0 10px rgba(0, 167, 255, 0.3),
  //     0 0 20px rgba(0, 167, 255, 0.2);
  //   z-index: -1;
  // }
  
  // 科技感边框动画
  @keyframes techGlowBorder {
    0% {
      background-position: 0% 50%;
      opacity: 0.5;
    }
    50% {
      background-position: 100% 50%;
      opacity: 0.5;
    }
    100% {
      background-position: 0% 50%;
      opacity: 0.5;
    }
  }

  /* 板块标题样式 - 左侧蓝色边框装饰 */

  .title {
    color: white;
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 5px 0;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid #00a7ff;
    padding-left: 10px;
    border-radius: 2px;
    margin-bottom: 5px;
  }

  /* 页面主体布局 - 三栏布局 */

  .page-middle {
    height: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;

    /* 左侧信息面板 - 占28%宽度 */

    .page-middle-left {
      width: 28%;
      height: 100%;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      /* 通用内容容器样式 - 带边框和阴影效果 */

      .context {
        width: 100%;
        height: calc(100% - 30px);
        border: 3px solid #57dcf9;
        text-align: left;
        vertical-align: middle;
        display: flex;
        box-shadow: 0 0 15px rgba(87, 220, 249, 0.5);
      }

      /* 荣誉特长区域样式 */

      .rongytch {
        width: 100%;
        height: 100%;
        padding: 10px 0;
        box-sizing: border-box;

        /* 特长标签区域 - 占30%高度 */

        .rongytch-box1 {
          flex: 30%;
          width: 100%;
          height: 30%;

          /* 特长标签样式 - 绝对定位，支持椭圆分布 */

          .aih {
            position: absolute;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
          }
        }

        /* 荣誉时间线区域 - 占70%高度 */

        .rongytch-box2 {
          flex: 70%;
          height: 70%;

          /* 时间线容器样式 */

          .rongytch-box2-timeline {
            margin-top: 16px;
            flex: 1;
            justify-items: start;
          }
        }
      }

      /* 板块一：基本信息区域 - 占20%高度 */

      .page-middle-left-one {
        height: 24%;

        /* 基本信息容器 */

        .context {
          width: 100%;
          height: calc(100% - 30px);
          padding: 16px 10px;
          box-sizing: border-box;
          position: relative;
          background-image: url("@/assets/images/profile/infpback3x.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border: none;
          box-shadow: none;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;

          color: #e8e8e8;
        }

        /* 左侧：头像和姓名区域 - 占35%宽度 */

        .stu-base-left {
          flex: 30%;
          height: 100%;
          position: relative;
          padding-left: 5px;
          color: #e8e8e8;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          /* 学生头像样式 - 圆形边框带发光效果 */

          .stu-base-toux {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            text-align: center;
            /* border: 3px solid #57DCF9; */
            background-color: #0a0a1a;
            box-shadow: 0 0 15px #57dcf9, inset 0 0 15px rgba(87, 220, 249, 0.2);
            // padding: 3px;
            margin-bottom: 8px;
            cursor: pointer;
          }

          /* 入学时间文字样式 */

          .stu-base-time {
            font-size: 8px;
            color: #a9a9a9;
            margin-top: 8px;
          }
        }

        /* 右侧：详细信息网格布局 - 占65%宽度 */

        .stu-base-right {
          flex: 70%;
          height: 100%;
          display: grid;
          padding: 10px;
          box-sizing: border-box;
          flex-wrap: wrap;
          grid-template-columns: 1fr 1fr; /* 两列网格布局 */
          color: #e8e8e8;

          /* 信息项样式 */

          .stu-info-base {
            font-size: 10px;
            display: flex;
            align-items: center;
            color: #e8e8e8;
          }
        }
      }

      .page-middle-left-two,
      .page-middle-left-three {
        height: 40%;

        /* 课程考勤容器 */

        .context {
          height: calc(100% - 30px);
          background-image: url("@/assets/images/profile/backTest3x.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border: none;
          box-shadow: none;
          image-rendering: -webkit-optimize-contrast;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: -webkit-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;
        }

        .kechengKaoQ {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 16px 0;
          box-sizing: border-box;

          /* 子标题样式 */

          .c-title {
            width: 100%;
            font-size: 14px;
            color: #80d3ff;
            font-family: "Source Han Sans CN", "思源黑体", "PingFang SC", "Microsoft YaHei", sans-serif;
          }

          /* 课程考勤内容区域 */

          .kechengKaoQ-context {
            width: 100%;
            font-size: 12px;

            /* 课程按钮容器 */

            .course-gaokxk {
              display: flex;
              margin-top: 5px;
              gap: 10px;
              flex-wrap: wrap;

              /* 课程按钮包装器 */

              .course-gaokxk-box {
                flex: 1;
                height: 30px;
                display: flex;
                align-items: center;
              }

              /* 考勤统计容器（未使用） */

              .kaoqtj {
                border: 1px solid red;
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
              }

              /* 课程按钮样式 */

              .course-gaokxk-btn {
                min-width: 100px;
                height: 30px;
                border: 2px solid #00fff0;
                border-radius: 3px;
                background: linear-gradient(135deg, rgba(0, 255, 240, 0.1), rgba(0, 255, 240, 0.05));
                color: #00fff0;
                font-size: 11px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                cursor: pointer;
                transition: all 0.3s ease;
              }

              /* 选修课程按钮特殊样式 */

              .course-gaokxk-btn[value="生物与生活"],
              .course-gaokxk-btn[value="人本主义团体辅导活动"],
              .course-gaokxk-btn[value="宇宙探秘"],
              .course-gaokxk-btn[value="英语好文精读"] {
                border: 2px solid #00ffb2;
                color: #00ffb2;
                font-size: 11px;
                border-radius: 3px;
                background: linear-gradient(135deg, rgba(0, 255, 178, 0.1), rgba(0, 255, 178, 0.05));
              }

              /* 鼠标悬停时增强背景效果 */

              .course-gaokxk-btn:hover {
                background: linear-gradient(135deg, rgba(0, 255, 240, 0.2), rgba(0, 255, 240, 0.1));
              }

              /* 选修课程按钮悬停效果 */

              .course-gaokxk-btn[value="生物与生活"]:hover,
              .course-gaokxk-btn[value="人本主义团体辅导活动"]:hover,
              .course-gaokxk-btn[value="宇宙探秘"]:hover,
              .course-gaokxk-btn[value="英语好文精读"]:hover {
                background: linear-gradient(135deg, rgba(0, 255, 178, 0.2), rgba(0, 255, 178, 0.1));
              }
            }

            /* 考勤统计展示容器 */

            .kechengKaoQ-context-wk {
              width: 100%;
              display: flex;
              margin-top: 10px;

              /* 考勤数据圆形背景 */

              .bj {
                margin: 0 auto;
                width: 45px;
                height: 36px;
                position: relative;
                background-image: url("@/assets/images/profile/students/qingjtsh.png");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
                image-rendering: pixelated;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: -webkit-crisp-edges;
                image-rendering: crisp-edges;
                image-rendering: pixelated;
                -ms-interpolation-mode: nearest-neighbor;

                /* 考勤数字样式 */

                .bj-text {
                  width: 45px;
                  position: absolute;
                  top: 10%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  text-align: center;
                  font-size: 16px;
                  font-weight: bold;
                  color: #80d3ff;
                }

                /* 出勤天数字体颜色 */
                .chuqin-text {
                  color: #fff !important;
                }

                /* 请假天数字体颜色 */
                .qingjia-text {
                  color: #58ff2d !important;
                }

                /* 早退天数字体颜色 */
                .zaotui-text {
                  color: #00e0ff !important;
                }

                /* 迟到天数字体颜色 */
                .chidao-text {
                  color: #ffc700 !important;
                }

                /* 缺勤天数字体颜色 */
                .queqing-text {
                  color: #f1468e !important;
                }

                /* 出勤天数特殊背景样式 */
                &.chuqin-bj {
                  background-image: url("@/assets/images/profile/chuqin.png");
                }

                /* 请假天数特殊背景样式 */
                &.qingjia-bj {
                  background-image: url("@/assets/images/profile/students/qingjtsh.png");
                }

                /* 早退天数特殊背景样式 */
                &.zaotui-bj {
                  background-image: url("@/assets/images/profile/zaotui3x.png");
                }

                /* 迟到天数特殊背景样式 */
                &.chidao-bj {
                  background-image: url("@/assets/images/profile/chidao3x.png");
                }

                /* 缺勤天数特殊背景样式 */
                &.queqing-bj {
                  background-image: url("@/assets/images/profile/queqing3x.png");
                }
              }

              /* 考勤描述文字 */

              .bj-desc {
                text-align: center;
                font-size: 13px;
              }
            }
          }
        }
      }
    }

    /* 中间区域：学生照片展示 - 占35%宽度 */

    .page-middle-center {
      width: 35%;
      margin-right: 20px;
      height: 100%;

      /* 学生照片背景容器 */

      .tab-menus-wk {
        width: 100%;
        height: calc(100% - 30px);
        background-image: url("@/assets/images/profile/CenterBack3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 30px;
        position: relative;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;

        /* 学生照片容器样式 */

        .student-photo-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 612px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

                /* 文字核心样式 */
        .stu-name-mid {
          cursor: pointer;
          /* 字体设置 */
          font-family: "SimHei", "Microsoft YaHei", "Arial Black", sans-serif;
          font-weight: 900;
          /* 超粗体 */
          letter-spacing: -2px;
          /* 字符间距微调，增强紧凑感 */

          /* 文字颜色与立体效果 */
          color: #ffffff;
          text-shadow:
            3px 3px 0 #0099cc,
            /* 第一层阴影 */
            6px 6px 0 #0077aa,
            /* 第二层阴影 */
            0 0 10px rgba(0, 153, 204, 0.3);
          /* 轻微发光效果 */

          /* 额外装饰 */
          padding: 20px 40px;
          border-radius: 8px;

          /* 过渡效果，可选 */
          transition: transform 0.3s ease;
        }

        /* 鼠标悬停效果（可选） */
        .stu-name-mid:hover {
          transform: scale(1.05);
          /* 轻微放大 */
        }

        .student-photo-name {
          position: absolute;
          top: 30px;
          right: 40px;
          font-size: 60px;
        }

        /* 教师照片样式 */

        .student-photo {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border-radius: 10px;
          transition: opacity 0.3s ease;
          opacity: 1;
          
          /* 加载中状态 */
          &.loading {
            opacity: 0.7;
          }
          
          /* 加载完成状态 */
          &.loaded {
            opacity: 1;
          }
        }
      }
    }

    /* 右侧区域：详细信息标签页 - 占45%宽度 */

    .page-middle-right {
      width: 45%;
      height: 100%;
      overflow: hidden;

      /* 右侧内容容器 - 使用rightinfo3x.png作为背景边框 */

      .right-content-container {
        height: calc(100% - 30px);
        margin-top: 30px;
        padding-left: 10px;
        padding-right: 10px;
        background-image: url("@/assets/images/profile/rightinfo3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
      }

      /* 标签页菜单容器 */

      .tab-menus-wk {
        width: 90%;
        height: 70px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* 标签页菜单样式 - 使用bqback3x.png作为背景 */

      .tab-menus {
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        background-image: url("@/assets/images/profile/bqback3x.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;

        /* 菜单项样式 */
        .menu-box.active {
          background: linear-gradient(180deg, rgba(0, 161, 246, 0) 0%, rgba(0, 161, 246, 0.8) 100%);
          a {
            color: #00fff0;
          }
        }

        .menu-box {
          width: 93px;
          height: 30px;
          line-height: 30px;
          margin: 0 10px;
          text-align: center;

          /* 菜单链接样式 */

          a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
  }
}

/* 弹窗内容样式 */
.dialog-content {
  color: #fff;
}

.dialog-content h3 {
  color: #00f0ff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.dialog-content-stu {
  color: #00f0ff;
}

.course-info {
  line-height: 1.8;
}

.course-info p {
  margin-bottom: 12px;
  font-size: 14px;
}

.course-info strong {
  color: #00f0ff;
  font-weight: bold;
}

/* 月份选择下拉框样式 */
.month-select {
  width: 95px;
  height: 20px;
  border: 2px solid #00d1ff;
  border-radius: 2px;
  background: radial-gradient(
    circle,
    rgba(0, 209, 255, 0.1),
    rgba(0, 209, 255, 0.05)
  );
  color: #00fff0;
  font-size: 9px;
  font-family: "Source Han Sans CN", "思源黑体", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  padding: 0 5px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

/* 下拉框选项样式 */
.month-select option {
  background-color: rgba(0, 0, 0, 0.8);
  color: #00fff0;
  font-size: 9px;
  padding: 5px;
}

/* 下拉框悬停效果 */
.month-select:hover {
  border-color: #00fff0;
  background: radial-gradient(
    circle,
    rgba(0, 255, 240, 0.15),
    rgba(0, 255, 240, 0.08)
  );
}

/* 下拉框焦点效果 */
.month-select:focus {
  border-color: #00fff0;
  box-shadow: 0 0 5px rgba(0, 255, 240, 0.3);
}

/* Element Plus 组件样式覆盖 */
::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 1px #00fff0 inset;
  color: #00fff0;
}

::v-deep .el-input__inner {
  color: #fff;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: 0 0 0 1px #00fff0 inset;
  color: #00fff0;
}

::v-deep .el-table th.el-table__cell {
  background-color: #00BCB1;
  color: #C5D9FB;
}

::v-deep .el-table {
  background-color: transparent;
  color: #fff;
}

::v-deep .el-table tr {
  background-color: transparent;
}

::v-deep .el-select__placeholder {
  color: #fff;
}

::v-deep input::placeholder {
  color: #fff;
}

::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-color: #9FFFF9;
}
</style>
